<!--
功能：换寝组件,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/5/31 17:24,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="box">
      <div class="header">
        详细信息
      </div>
      <div class="user">
        <el-table
          :data="userTable"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            label="编号"
            width="50">
          </el-table-column>
          <el-table-column
            v-for="t in table"
            :key="t.id"
            :prop="t.prop"
            :label="t.label">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">换寝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="input">
        <span>学员信息</span>
        <span class="ipt">
           <el-input
             placeholder="请输入学员学号"
             prefix-icon="el-icon-user"
             @keydown.enter.native="input"
             v-model="ipt">
             <el-button slot="append" icon="el-icon-search" @click="input"></el-button>
           </el-input>
        </span>
      </div>
      <div class="content">
        <div class="user-content"
             v-for="u in tableData"
             @click="handle(u)"
             :key="u.id">
          <div class="img">
            <el-image :src="userUrl" fit="fill" class="image"></el-image>
          </div>
          <div class="name">
            {{ u.name }}
          </div>
          <div class="account">{{ u.account }}</div>
          <div class="pro">{{ u.professional }}</div>
          <div class="grad">{{ u.grade }}</div>
        </div>
      </div>
      <div class="page">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="total , prev, pager, next"
          :total="all">
        </el-pagination>
      </div>
      <div class="mon">
        <span>重要提示：</span>
        <ul>
          <li v-for="i in lis" :key="i.id">{{i.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {message} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Change",
  data() {
    return {
      lis:[{
        id:1,
        name:'为了有效的管理学员信息，每位学员每一学期仅有一次的申请换寝的机会。'
      },{
        id:2,
        name:'为了更快的融入生活，请勿随意更换寝室。'
      },{
        id:3,
        name:'在未经过管理员同意之前，严禁允许私自更换寝室位置，如经发现将做记大过处理。'
      }],
      note: '',
      userUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      all: 100,
      ipt: '',
      userTable: [],
      table: [{
        id: 1,
        label: '姓名',
        prop: 'name'
      }, {
        id: 2,
        label: '学号',
        prop: 'account'
      }, {
        id: 3,
        label: '专业',
        prop: 'professional'
      }, {
        id: 4,
        label: '班级',
        prop: 'grade'
      }, {
        id: 5,
        label: '电话',
        prop: 'phone'
      }, {
        id: 6,
        label: '床位',
        prop: 'beds.name'
      }, {
        id: 7,
        label: '房间',
        prop: 'room.name'
      }, {
        id: 8,
        label: '楼层',
        prop: 'floor.name'
      }],
      tableData: [],
      page: 1,
      pageSize: 5,
    };
  },
  components: {},
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    this.findTrade()
  },
  methods: {
    input() {
      //  搜索
      if (this.ipt.trim() == '') {
        //查询第一页数据
        this.page = 1
        this.findTrade()
      } else {
        let user = {
          id: this.user.floor.id,
          account: this.ipt,
        }
        //  数据请求
        this.$http.post('user/input', user).then(response => {
          message("success", "成功")
          this.tableData = response.data
          this.ipt = ''
        }).catch(err => {
          message("error", "请求参数错误")
        })
      }
    },
    handle(u) {
      this.userTable = []
      this.userTable.push(u)
    },
    handleCurrentChange(val) {
      this.page = val
      this.findTrade()
    },
    findTrade() {
      this.$http.get('user/tradeAll/' + this.page + '/' + this.pageSize + '/' + this.user.floor.id).then(response => {
        message("success", "成功")
        this.tableData = response.data.info
        this.all = response.data.total - 1
      }).catch(err => {
        message("error", "请求参数错误")
      })
    },
    handleEdit(index, row) {
      this.$confirm('你确定要和该同学换寝室吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //添加备注消息
        this.$prompt('请输入备注消息,不可超过5个字符！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          if (value.length>5){
            message("error","备注消息不可超过五个字符！")
          }else {
            row.note = value
            this.$http.post('user/addTrade', row).then(response => {
              if (response.data) {
                message("success", "成功")
              } else {
                message("error", "该申请已存在，请前往个人中心查看！")
              }
            }).catch(err => {
              message("error", "请求参数错误")
            })
          }
        }).catch(() => {
        });

      }).catch(() => {
        message("warning", "取消该操作")
      });
    },
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

.mon{
  width: 93%;
  margin-bottom: 20px;
  /*background-color: pink;*/
}
.mon span{
  font-weight: 700;
  font-size: 20px;
  color: red;
}
.mon li{
  margin: 5px 0;
  letter-spacing: 2px;
  color: #909399;
}

.content {
  width: 93%;
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
}

.user-content {
  width: 244px;
  height: 300px;
  background-color: #F3F3F3;
  border-radius: 8px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
}

.user-content:hover {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}

.user-content:hover div {
  color: #000000;
}

.user-content div {
  transition: all .3s;
  margin: 5px;
  color: #909399;
  letter-spacing: 2px;
  font-weight: 700;
}

.image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.page {
  width: 93%;
  text-align: end;
  margin: 10px 0;
  padding-right: 20px;
}

.input {
  width: 93%;
  margin: 20px 0;
  /*background-color: pink;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  /*height: 40px;*/
  box-sizing: border-box;
  color: #909399;
  padding: 0 20px;
  border-left: 5px solid red;
}

.user {
  width: 93%;
}

.header {
  width: 93%;
  margin: 20px 0;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #909399;
  box-sizing: border-box;
  border-left: 5px solid red;
  padding-left: 10px;
  /*background-color: pink;*/
}


.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user /deep/ .el-table th > .cell {
  text-align: center;
}

.user /deep/ .el-table .cell {
  text-align: center;
}
</style>
